<template>
  <a-modal :width="500" v-model:visible="showSetPositionDialog" title="采购进度项目管理" title-align="start" :footer="false" :mask-closable="false" @cancel="closedDialog">
    <a-input-search style="width: 320px" v-model="editVal" placeholder="填写进度名称" button-text="确认添加" search-button @search="startAddStatus" />
    <a-table style="margin: 20px 0" :scroll="{ y: '300px' }" class="table-singe-line" :bordered="false" :columns="tableColumns" :data="list" size="mini" :pagination="false">
      <template #columns>
        <a-table-column v-for="(item, index) of tableColumns" :key="index" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
          <template v-if="item.title === '操作'" #cell="{ record }">
            <a-space>
              <a-popconfirm content="确定是否删除?" @ok="deleteItem(record)" type="error">
                <a-button type="text" size="mini">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
          <template v-else #cell="{ record }">
            {{ record[item.dataIndex] }}
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { findPurchaseStatusPage, createPurchaseStatus, deletePurchaseStatus } from '@/api/purchaseApplication'
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  const showSetPositionDialog = ref(props.isShow)
  const editVal = ref('')
  const tableColumns: Array<any> = [
    {
      title: '进度项目',
      dataIndex: 'purchaseStatus',
    },
    {
      title: '操作',
      dataIndex: 'handle',
      width: 80,
    },
  ]

  // 删除
  async function deleteItem(item: any) {
    const res: any = await deletePurchaseStatus({ ids: [item.id] })
    if (res) {
      Message.success('删除成功')
      emit('success')
    }
  }
  // 添加
  async function startAddStatus(val: string) {
    if (!val?.trim()) {
      Message.error('请输入进度项目名称')
      return
    }
    const res: any = await createPurchaseStatus({ purchaseStatus: val.trim() })
    if (res) {
      editVal.value = ''
      Message.success('添加成功')
      emit('success')
    }
  }
  function closedDialog() {
    showSetPositionDialog.value = false
    emit('closed')
  }
</script>
